<!-- 编辑表单 -->
<template>
  <q-card style="width: 600px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>{{ title }}</q-toolbar-title> <q-btn v-close-popup icon="close" round flat />
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section>
      <!-- prettier-ignore -->
      <q-form ref="formRef" class="row q-col-gutter-x-md">
        <q-tree-select v-model="dto.areaId" label="所属小区" readonly :rules="[required]" :nodes="treeOptions" node-key="value" class="col-12" @update:model-value="changeArea"/>
        <q-select v-model="dto.buildingLevel" :options="ops.buildingLevel" label="楼宇类型" class="col-12 col-sm-6" :rules="[required]" emit-value map-options />
        <q-select v-model="dto.parentId" :options="mainOps"  readonly label="对应楼栋" class="col-12 col-sm-6" emit-value map-options />
        <q-input v-model="dto.buildingNo" label="楼宇编号" :rules="[required]" class="col-12 col-sm-6" @update:model-value="changeNo" />
        <q-input v-model="dto.buildingName" label="楼宇名称" :rules="[required]" class="col-12 col-sm-6" />

        <q-input v-model.number="dto.floor" label="建筑层数" :rules="[required]" class="col-12 col-sm-6" />
        <q-select v-model="dto.buildingType" label="建筑类型" :options="ops.buildingType" :rules="[required]" map-options emit-value class="col-12 col-sm-6" />
        <q-select v-model="dto.buildingUsage" label="用途" :options="ops.buildingUsage" :rules="[required]" map-options emit-value class="col-12 col-sm-6" />
        <q-select v-model="dto.buildingDirection" label="楼房朝向" :options="ops.buildingDirection" :rules="[required]" map-options emit-value class="col-12 col-sm-6" />
        <q-input v-model="dto.remark" label="备注说明" class="col-12" type="textarea" rows="2" />
      </q-form>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions v-if="!readonly">
      <q-checkbox v-model="closeAfterSave" label="保存后关闭" />
      <q-space />
      <q-btn v-close-popup>取消</q-btn>
      <q-btn color="primary" icon="save" :loading="loading" @click="handleSubmit">保存</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { required } from 'src/utils/validator';
  import { queryOptions, useCrudForm } from 'src/composables';

  import crudApi, { BuildingDto, getAreaTree, getMainBuilding } from 'src/api/community/building';
  import { onMounted, ref } from 'vue';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], default: undefined },
    title: { type: String, default: '表单' },
    readonly: { type: Boolean, default: false },
    parent: { type: Object, default: () => {} },
  });
  const emit = defineEmits(['close', 'after-save']);

  const treeOptions = ref<SelectOption[]>([]);
  const treeExpanded = ref<IdType[]>([0]);
  const ops = ref({
    buildingLevel: [] as SelectOption[],
    buildingType: [] as SelectOption[],
    buildingUsage: [] as SelectOption[],
    buildingDirection: [] as SelectOption[],
  });
  onMounted(() => {
    queryOptions('building-dicts').then((data) => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ops.value = data as any;
    });
    getMainBuilding(dto.value.areaId).then((data) => (mainOps.value = data));
    getAreaTree().then((data) => {
      treeOptions.value = data;
      data.forEach((t) => {
        t.selectable = false; //社区不让选，只选小区
        treeExpanded.value.push(t.value as IdType);
        t.children?.forEach((c) => treeExpanded.value.push(c.value as IdType));
      });
    });
  });

  // 表单数据
  const initBuilding = { ...props.parent } as BuildingDto;
  const { formRef, dto, closeAfterSave, loading, handleSubmit } = useCrudForm<BuildingDto>(crudApi, initBuilding, props, emit);

  const mainOps = ref<SelectOption[]>([]);
  function changeArea() {
    getMainBuilding(dto.value.areaId).then((data) => (mainOps.value = data));
  }

  function changeLevel() {
    dto.value.parentId = undefined;
  }
  function changeNo() {
    dto.value.buildingName = dto.value.buildingNo + (dto.value.buildingLevel == 1 ? '号楼' : '单元');
  }
</script>

<style lang="scss" scoped></style>
